<template>
    <div>
        <h1>首页</h1>
        <h1>store使用方法1：{{ $store.state.name }}</h1>
        <h1>store使用方法2：{{state.name}}</h1>
        <button @click="add">number的值是：{{number}}</button>
        <h3>count的值是：{{ $store.state.count }}</h3>
    </div>
</template>
<script>
import{ ref,onMounted } from "vue"
import { useStore } from 'vuex'
export default {
    setup(){
        const store=useStore();
        const state=ref(store.state);
        const number=ref(0);
        const add=()=>{
            number.value=number.value+1;
            store.commit('increment')
        };
        onMounted(()=>{
            console.log("number的值是："+number.value);
            console.log("count的值是：："+state.value.count);            
        });
        return{
            number,
            add,
            state
        };
    }
};
</script>
<style scoped></style>